<template>
    <div class="ueditor-container" >
        <vue-ueditor-wrap 
            v-model="content"
            editor-id="editor"
            :config="editorConfig"
            @ready="handleEditorReady"
            :editorDependencies="['ueditor.config.js','ueditor.all.js']"
            style="height:500px;"/>
    </div>
</template>

<script setup>
    import {ref} from 'vue';
    const emit = defineEmits(['update:modelValue']);
    const props = defineProps({
        modelValue: {
            type: [String, Object, Array],
            default: () => ''
        },
    });

    const content = ref(props.modelValue);

    // 3. 监听父组件传递的值变化，同步到子组件
    watch(
        () => props.modelValue,
        (newVal) => {
            content.value = newVal
        }
    )

    // 编辑器初始化完成后获取实例
    const handleEditorReady = (editorInstance) => {
        // 绑定 contentChange 事件
        editorInstance.addListener('contentChange', () => {
            const betterContent = replaceNbsp(editorInstance.getContent());
            emit('update:modelValue', betterContent);
        })
    }

    function replaceNbsp(htmlString) {
        const div = document.createElement('div');
        div.innerHTML = htmlString;
        const treeWalker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT, null, false);
        const textNodes = [];
        while (treeWalker.nextNode()) {
            textNodes.push(treeWalker.currentNode);
        }
        textNodes.forEach(node => {
            node.nodeValue = node.nodeValue.replace(/\u00A0/g, ' ');
        });
        return div.innerHTML;
    }

    const editorConfig = {
        initialFrameWidth: '100%',
        initialFrameHeight: 500, // 高度按需设置
        // 禁用空标签自动填充&nbsp;
        autoFillBlank: false,  // 关键配置：3.0.1版本特有的空标签填充开关
        // 增强配置：处理表格和段落
        tableConfig: {
            enableFillSpace: false  // 表格单元格不填充
        },
        enterTag: 'p',
        preventEmptyLine: true,
        // 源码模式相关配置
        sourceEditor: 'codemirror',  // 使用codemirror作为源码编辑器（减少格式干扰）
        retainOnlyLabelPasted: true,  // 粘贴时只保留标签，不自动补空格
        // 后端服务地址，后端处理参考
        // https://open-doc.modstart.com/ueditor-plus/backend.html
        // 服务器统一请求接口路径
        serverUrl: "/dev-api/ueditorPlus",
        UEDITOR_HOME_URL: '/static/UEditorPlus/',
        UEDITOR_CORS_URL: '/static/UEditorPlus/',
        imageAllowFiles: ['.jpg', '.jpeg', '.png', '.gif', '.bmp']
    }
</script>

<style scoped>

.ueditor-container{
    margin-right: 60px;
    height: 500px; /* 根据需求设置固定高度 */
    overflow: auto; /* 内容超出时显示滚动条 */
}

/* 若编辑器内部有特定内容区域（如 iframe 包裹的编辑区），可进一步设置 */
.ueditor-container .edui-body-container {
  max-height: calc(100% - 50px); /* 减去工具栏高度，避免滚动条覆盖工具栏 */
  overflow: auto;
}
</style>